<template>
  <div class="work-place">
    <el-button type="danger" @click="handleSend">退出房间</el-button>
    <div class="header">
      <div class="room">房间号：1234</div>
      <div class="current_num">当前房间在线人数：1</div>
    </div>
    <div class="chat-box">
      <div
        class="chat-box_item"
        v-for="(item, index) in sendMessageArr"
        :key="index"
      >
        <div class="name">{{ item.name }}</div>
        <div class="chat-text">{{ item.text }}</div>
      </div>
    </div>
    <div class="bottom">
      <el-input
        class="textarea"
        type="textarea"
        :rows="2"
        placeholder="请输入内容"
        v-model="sendText"
      ></el-input>
      <el-button type="primary" @click="handleSend" class="btn-send"
        >发送</el-button
      >
    </div>
  </div>
</template>
<script setup lang="ts">
import { useWorkPlace } from './workPlace'
const { sendMessageArr, handleSend, sendText } = useWorkPlace()
</script>

<style scoped lang="scss">
.work-place {
  margin: 0 auto;
  width: 500px;
  .header {
    text-align: center;
  }
  .chat-box {
    width: 100%;
    height: 400px;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    overflow: auto;
    &_item {
      display: flex;
      align-items: center;
      margin-top: 5px;
      .name {
        margin-right: 4px;
      }
      .chat-text {
        background-color: greenyellow;
        padding: 10px 15px;
        border-radius: 5px;
      }
    }
  }
  .bottom {
    text-align: center;
    .textarea {
      margin: 10px 0 10px 0;
    }
  }
}
</style>
